<template>
  <div v-loading="loading">
    <MciTable :data="tableData" stripe>
      <MciTableColumn type="index" label="序号" align="center" width="50" />
      <MciTableColumn label="调用方名称" prop="appName" />
      <MciTableColumn label="APP_ID" prop="appId" />
      <MciTableColumn label="APP_KEY" prop="appKey" />
      <MciTableColumn label="回调地址" prop="callbackUrl" />
      <MciTableColumn label="审核状态" prop="status" :formatter="formatterStatus" />
      <MciTableColumn label="操作" min-width="160">
        <template #default="scope">
          <el-space>
            <mci-button v-show="scope.row.status === 0 && adminBtn" type="danger" link @click="handleCheck(scope.row)"> 审核 </mci-button>

            <el-popconfirm title="确定删除吗?" confirm-button-text="确定" cancel-button-text="取消" @confirm="delRow(scope.row)">
              <template #reference>
                <mci-button type="danger" link> 删除 </mci-button>
              </template>
            </el-popconfirm>
          </el-space>
        </template>
      </MciTableColumn>
    </MciTable>
    <mci-dialog
      v-model="showCheck"
      title="审核"
      width="600"
      draggable
      :confirm-handle="handleConfirm"
      @close="handleClosed"
    >
      <AppCheck ref="appCheckRef" @change="handleChange" />
    </mci-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { MciTable, MciTableColumn, MciButton, MciDialog } from '@/components/base';
import { ElSpace, ElPopconfirm } from 'element-plus';
import { getAppList, postAppDelete, postAppAssign } from '@/api/decision-engine';
import type {
  IGetAppListRes,
  IPostAppDeleteReq,
  IPostAppAssignReq
} from '@/api/decision-engine';
import AppCheck from '../app-check/index.vue';
import { CheckAppForm } from '../../data';
import { useAppStore } from '@/store/app';
import { ADMIN_ROLECODE } from '@/constants/config';
const appStore = useAppStore();
const adminBtn = ref<any>(false);
adminBtn.value = appStore?.mcisaas?.roles?.some(item => Number(item.roleCode) === ADMIN_ROLECODE);
// 表格
const loading = ref(false);
const tableData = ref<any[]>([]);

// 模型数据
const tableRequest = async () => {
  loading.value = true;
  try {
    const data: IGetAppListRes = await getAppList({});

    tableData.value = data || [];
  } finally {
    setTimeout(() => {
      loading.value = false;
    }, 300);
  }
};

tableRequest();

// 删除行
const delRow = async (row: any) => {
  if (!row || !row.id) return;
  const params: IPostAppDeleteReq = {
    id: row.id
  };
  await postAppDelete(params);
  tableRequest();
};

const formatterStatus = (row: any) => {
  if (row && (row.status || row.status === 0)) {
    switch (row.status) {
      case 0:
      return '未审核';
      case 1:
      return '已审核';
      default:
      return '--';
    }
  }
  return '--';
};

// 审核弹窗
const appCheckRef = ref<any>(null);
const showCheck = ref(false);
let checkParam :CheckAppForm = {
  id: '',
  appId: '',
  appKey: ''
};
const handleCheck = (row: any) => {
  handleClosed();
  resetCheck();
  showCheck.value = true;
  checkParam.id = row.id;
};
const handleChange =(formData: CheckAppForm) => {
  checkParam.appId = formData?.appId;
  checkParam.appKey = formData?.appKey;
};

// 确定操作
const handleConfirm = () => {
  if (!checkParam.appId || !checkParam.appKey) {
    return;
  }
  checkRequest();
};

// 核对请求
const checkRequest = async () => {
  const params: IPostAppAssignReq = {
    id: checkParam.id,
    appId: checkParam.appId,
    appKey: checkParam.appKey
  };
 await postAppAssign(params);
  // if (data) {
    handleClosed();
    tableRequest();
  // }
};

// 取消核对
const handleClosed = () => {
  showCheck.value = false;
  appCheckRef.value?.resetForm();
};

// 重置数据
const resetCheck = () => {
  checkParam.id = '';
  checkParam.appId = '';
  checkParam.appKey = '';
};

defineExpose({
  tableRequest
});
</script>
